<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务列表demo</title>
</head>
<body>
<div id="application">
    <form v-on:submit.prevent="addTask">
        <label for="taskTexts">新建任务</label>
        <input placeholder="请输入任务详情" name="taskTexts" v-model="taskTexts" id="taskTexts" ref="taskTexts">
        <button>添加</button>
    </form>
    <ol>
        <li v-for="(item, index) in todoList">
            {{item}}
            <button v-on:click="removeTodo(index)">删除任务</button>
            <hr>
        </li>
    </ol>
</div>
<script src="../vue3.js"></script>
<script>
    const app = {
        data() {
            return {
                taskTexts: "",
                todoList: []
            }
        },
        methods: {
            addTask() {
                if (this.taskTexts.length === 0) {
                    alert("请输入任务")
                    return
                }
                this.todoList.push(this.taskTexts)
                this.taskTexts = ""
            },
            removeTodo(index) {
                this.todoList.splice(index, 1)
            }
        }
    }
    Vue.createApp(app).mount("#application")
</script>
</body>
</html>